<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>增加用户功能</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/public.css" media="all" />
</head>
<body class="childrenBody">
    <form class="layui-form" style="padding: 20px" method="post" enctype="multipart/form-data" id="userForm">
        <div class="layui-form-item">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-block">
                <input type="text" id="telephone" name="telephone" required  lay-verify="required" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block">
                <input type="password" id="password" name="password" required  lay-verify="required" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名:</label>
            <div class="layui-input-block">
                <input type="text" id="realname" name="realname" required  lay-verify="required" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日:</label>
            <div class="layui-input-block">
                <input type="text" id="birthday" name="birthday" required  lay-verify="required" placeholder="请输入生日" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门:</label>
            <div class="layui-input-block">
                <select id="deptid" name="dept.id">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态:</label>
            <div class="layui-input-block">
                <select id="available" name="available">
                    <option value=""></option>
                    <option value="1">启用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图像:</label>
            <button type="button" class="layui-btn" id="headimg">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <img id="userImage" width="150px" height="150px" src="/static/layui/images/nopic.png">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="addUser" id="addBtn">立即添加</button>
                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
            </div>
        </div>

    </form>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/layui/layui/layui.js"></script>
    <script>
        layui.use(['form','layer','laydate','table','laytpl','upload'],function(){
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                table = layui.table,
                upload=layui.upload;

                //绑定时间插件到生日文本框中
                laydate.render({
                   elem:'#birthday'
                });
                //文件上传
                upload.render({
                    elem:'#headimg',
                    url:'/addUser',
                    auto:false,
                    bindAction:'#addBtn',
                    before:function (obj) {
                        this.data={
                            telephone:$("#telephone").val(),
                            password:$("#password").val(),
                            realname:$("#realname").val(),
                            birthday:$("#birthday").val(),
                            did:$("#deptid").val(),
                            available:$("#available").val()
                        };
                        console.log(this.data);
                    },
                    choose:function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#userImage').attr('src', result); //图片链接（base64）
                        });
                    },
                    done:function (obj) {

                    }
                });

            $.ajax({
                url:'/selectAllDepts',
                type:'GET',
                success:function (res) {
                    for(var i=0;i<res.length;i++){
                        var optionitem=$("<option></option>");
                        optionitem.attr("value",res[i].id);
                        optionitem.append(res[i].dname);
                        $("#deptid").append(optionitem);
                    }
                    form.render('select'); //刷新select选择框渲染
                }
            });
            //提交表单

            form.on("submit(addUser)",function(data) {
                //var fd = new FormData();
                var formData = new FormData($("#userForm")[0]);
                $.ajax({
                    cache: true,
                    type: "post",
                    url: "/addUser",
                    async: false,
                    data: formData,  // 你的formid
                    contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                    processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                    success: function (res) {
                        layui.layer.msg(res);
                    }
                });
                return false;
            });

        })
    </script>
</body>
</html>